<script setup lang="ts">
import { orderBillPage, deleteBill } from "~/api/user";

useSeoMeta({
  title: "我的账单 - 技能猴子",
  ogTitle: "我的账单 - 技能猴子",
  description: "技能猴子，找技能服务，我喜欢和技能人才直接聊",
  ogDescription: "技能猴子，找技能服务，我喜欢和技能人才直接聊",
});

onMounted(() => {
  getList();
});

const tableData = ref([]);
const total = ref(0);
const pageNum = ref(1);
const getList = async () => {
  try {
    const { code, data } = await orderBillPage({
      pageNum: pageNum.value,
      pageSize: 10,
    });
    tableData.value = data.records;
    total.value = data.total;
  } catch (e) {
    console.log(e);
  }
};
const currentChange = (page) => {
  pageNum.value = page;
  getList();
};

const orderTypeFormatter = (row) => {
  switch (row.orderType) {
    case 1:
      return "服务";
    case 2:
      return "产品";
    case 3:
      return "其他";
  }
};
// 支付类型 （1:微信 2:支付宝 3:银联 4:其他)
const payTypeFormatter = (row) => {
  switch (row.payType) {
    case 1:
      return "微信";
    case 2:
      return "支付宝";
    case 3:
      return "银联";
    case 4:
      return "其他";
  }
};

const activeRow = ref(null);
const del = async (row) => {
  activeRow.value = row;
  dialogShow.value = true;
};
const dialogShow = ref(false);
const confirmDel = async () => {
  if (!activeRow.value) return;
  try {
    await deleteBill({
      id: activeRow.value.id,
    });
    await getList();
    ElMessage.success("删除成功");
    dialogShow.value = false;
  } catch (e) {
    console.log(e);
  }
};
</script>

<template>
  <BaseHeaderMenuWhite bg-color="white" />
  <div class="manage-members">
    <h4 class="page-title">我的账单</h4>
    <div class="list">
      <p class="header">
        <span class="size">全部账单（{{ total }}）</span>
      </p>
      <div class="table">
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{
            background: '#F5F7FA',
            height: '54px',
            color: '#191E28',
          }"
          :cell-style="{ height: '70px' }"
        >
          <el-table-column
            type="index"
            label="序号"
            width="70"
            align="center"
          ></el-table-column>
          <el-table-column label="订单编号" prop="buyerOrderId"></el-table-column>
          <el-table-column
            label="订单类型"
            prop="orderType"
            :formatter="(row) => orderTypeFormatter(row)"
            width="140"
          ></el-table-column>
          <el-table-column
            label="支付方式"
            prop="payType"
            :formatter="(row) => payTypeFormatter(row)"
            width="120"
          ></el-table-column>
          <el-table-column label="金额" prop="amount" width="120"></el-table-column>
          <el-table-column label="创建时间" prop="createTime"></el-table-column>
          <el-table-column label="支付时间" prop="payTime"></el-table-column>
          <el-table-column label="操作" prop="date" width="80">
            <template #default="scope">
              <span @click="del(scope.row)" type="text" class="del-btn">删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          layout="prev, pager, next"
          :page-size="10"
          :total="total"
          @current-change="currentChange"
        />
      </div>
    </div>
  </div>
  <BaseFooter />
  <DialogConfirmDialog
    v-if="dialogShow"
    content="确认删除该账单？"
    confirmText="删除"
    title="提示"
    @close="dialogShow = false"
    @confirm="confirmDel"
  />
</template>

<style scoped lang="scss">
.manage-members {
  padding-top: 80px;
  width: 1100px;
  margin: 0 auto;
  padding-bottom: 36px;
}
.page-title {
  color: #191e28;
  font-size: 20px;
  padding-top: 32px;
  padding-bottom: 16px;
}
.list {
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(11, 13, 18, 0.06);
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  padding: 20px 24px;
  box-sizing: border-box;
  .header {
    display: flex;
    align-items: center;
    .size {
      flex: 1;
      color: #191e28;
      font-size: 16px;
      font-weight: bold;
    }
    .add {
      color: #019a81;
      cursor: pointer;
    }
  }
  .table {
    margin-top: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
  }
  .del-btn {
    color: #ff4f4f;
    cursor: pointer;
  }
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
}
</style>

<style lang="scss">
.el-pagination button:disabled {
  background: none;
}
.el-pagination button.is-first {
  margin-right: 6px;
}
.el-pagination button.is-last {
  background: none;
  &:hover {
    font-weight: bold;
    color: #191e28;
  }
}
.el-pager li {
  background: none;
  width: 36px;
  height: 36px;
  margin-right: 6px;
  &:hover {
    font-weight: bold;
    color: #191e28;
  }
}
.el-pager li.is-active {
  background: #fff;
  box-shadow: 0 0 16px 0 rgba(11, 13, 18, 0.06);
  border-radius: 8px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  color: #191e28;
}
</style>
